<template>
  <!--中部组件-->
    <div class="center" ref="section"><!--加滚动条-->
      <section  ref="viewBox">
        <div class="scroll">
          <div class="lbt">
            <!--插入轮播图主键-->
            <lbt></lbt>
          </div>
          <!--中部拼图部分-->
          <div class="spelling">
            <img src="../../assets/155921683498601203.png" alt=""><!--
      --><img src="../../assets/155921685876387844.png" alt="">
          </div>
          <!--每日签到-->
          <div class="CenterRouter">
            <div class="interlayer">
              <router-link to=""
                           tag="div"
                           class="SmallBranch"
                           v-for="(val,key) in CRList"
                           :key = key
              >
                <img v-lazy="val.image" alt="#">
                <p>{{val.title}}</p>
              </router-link>
              <router-view></router-view>
            </div>
          </div>
          <!--插入今日毕拼与热拼榜主键-->
            <example></example>
          <!--精选热卖-->
          <p class="SelectionOfHot">精选热卖</p>
          <!--精选热卖榜-->
          <div class="SelectHotList">
            <SelectHotList></SelectHotList>
          </div>
        </div>
        <div class="youLike">
          <div class="wire"></div><p>我是有底线的</p><div class="wire"></div>
        </div>
      </section>
    </div>
</template>

<script>
  import SelectHotList from './SelectHotList/SelectHotList'
  import lbt from './lbt/LBT'
  import BScroll from 'better-scroll'
  import example from './example/example'
    export default {
        name: "center",
      data(){
          return{
            scroll: '',
            CRList:[
              {title: '每日签到',image:require('../../assets/155745615565685465.png')},
              {title: '一元邀新',image:require('../../assets/155745620576685615.png')},
              {title: '砍价团',image:require('../../assets/155745633201413553.png')},
              {title: '一分好礼',image:require('../../assets/155745634336643149.png')},
              {title: '拼购国际',image:require('../../assets/155367739181460729.png')},
              {title: '8.8包邮',image:require('../../assets/155849473466877746.png')},
              {title: '食品超市',image:require('../../assets/155745638811844821.png')},
              {title: '母婴馆',image:require('../../assets/155911181443788272.gif')},
              {title: '生活家电',image:require('../../assets/155298317461154674.png')},
              {title: '特色馆',image:require('../../assets/155745636672018807.png')}
            ],
            scrolled:false
          }
      },
      components:{
        lbt,
        example,
        SelectHotList
      },
      mounted(){
          let section = this.$refs.section;
         let scroll = new BScroll(section,{
            click:true,
            scrollY:true,
            probeType:3,
            bounce:false//关闭弹性
          });
        //onscroll滚动条的监听事件
        scroll.on('scroll', (pos) => {//pos滚动的高度值
          // 通过$bus将pos传到heater改变他的变化
          this.$bus.$emit('heater', pos);
        });

      },
      methods:{
      },
    }
</script>

<style scoped lang="scss">
  .center{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    bottom: 175px;
    font-size: 0;
    .lbt{
      height: 627px;
      background: white;
      position: relative;
    }
    .spelling{
      width: 100vw;
      height: 320px;
      img{
        display: inline-block;
        width:50%;
        height: inherit;
      }
    }
    .CenterRouter{
      width: 100vw;
      height: 520px;
      font-size: 0;
      border-radius: 20px;
      color: #666;
      .interlayer{
        margin: 25px 36px 0 40px;
        border-radius: 40px;
        background: white;
        padding: 43px 0 0 0;
        .SmallBranch{
          width: 20%;
          height: 1/2;
          display: inline-block;
          text-align: center;
          img{
            width: 68%;
          }
          p{
            font-size: 12px;
          }
        }
      }
    }
    .SelectionOfHot{
      line-height: 145px;
      font-size: 55px;
      color: #ea5044;
      text-align: center;
      text-indent: 2.5em;
      margin: 0;
      background: url("../../assets/ranking.png") no-repeat 42% center;
      background-size: 66px 66px;
    }
    .SelectHotList{
      width: 100%;
      padding:0 35px;
      box-sizing: border-box;
    }
    .youLike{
      width: 930px;
      margin: 10px auto;
      height: 90px;
      display: flex;
      .wire{
        width: 320px;
        height: 5px;
        background: #dddddd;
        margin: 30px 0;
        font-size: 43px;
      }
      p{
        flex: 1;
        text-align: center;
        font-size: 40px;
        color: rosybrown;
        margin: 0;
      }
    }
  }
</style>
